import React, { Fragment } from 'react';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import Locale from '@/utils/locale';
import colors from '@/theme';

const { locale } = new Locale('stat.report');

const getOption = ({
    abseDuty = 0,
    beLate = 0,
    leaveEarly = 0,
    missCard = 0
    // sumNum
}) => ({
    color: colors,
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%'
    },
    legend: {
        orient: 'vertical',
        right: 60,
        y: 'center',
        data: ['迟到', '早退', '缺卡', '缺勤']
    },
    gid: {
        x: '0'
    },
    series: [
        {
            name: locale('cqlfx'),
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['28%', '50%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            animation: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {
                    value: beLate,
                    name: '迟到'
                },
                {
                    value: leaveEarly,
                    name: '早退'
                },
                {
                    value: missCard,
                    name: '缺卡'
                },
                {
                    value: abseDuty,
                    name: '缺勤'
                }
            ]
        }
    ]
});

const CqlFx = ({ data }) => {
    const { abseDuty = 0, beLate = 0, leaveEarly = 0, missCard = 0 } = data;
    const option = getOption(data);
    const empty =
        abseDuty === 0 && beLate === 0 && leaveEarly === 0 && missCard === 0;
    return (
        <Card
            bordered={false}
            title={locale('kqlxycfx')}
            bodyStyle={{
                padding: 0
            }}
            style={{ position: 'relative' }}
        >
            {empty ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <Fragment>
                    <div
                        className="pieCenter"
                        style={{
                            left: '28%',
                            top: '55%',
                            transform: 'translateX(-50%)'
                        }}
                    >
                        <div>出勤异常率</div>
                        {/* <em>{avgAbnormalRate}%</em> */}
                    </div>
                    <ReactEcharts
                        legendExtra={[
                            name => {
                                const result = option.series[0].data.find(
                                    item => item.name === name
                                );
                                return {
                                    value: result && `${result.value} %`,
                                    type: 'increment',
                                    style: {
                                        padding: [0, 0, 0, 12]
                                    }
                                };
                            }
                        ]}
                        option={option}
                        style={{ height: '100%' }}
                    />
                </Fragment>
            )}
        </Card>
    );
};

export default CqlFx;
